    <link href="twitter-bootstrap/docs/assets/css/bootstrap.css" rel="stylesheet">
	 <script src="twitter-bootstrap/docs/assets/js/jquery.js"></script>
    <script src="twitter-bootstrap/docs/assets/js/bootstrap-transition.js"></script>
    <script src="twitter-bootstrap/docs/assets/js/bootstrap-alert.js"></script>
    <script src="twitter-bootstrap/docs/assets/js/bootstrap-modal.js"></script>
    <script src="twitter-bootstrap/docs/assets/js/bootstrap-dropdown.js"></script>
    <script src="twitter-bootstrap/docs/assets/js/bootstrap-scrollspy.js"></script>
    <script src="twitter-bootstrap/docs/assets/js/bootstrap-tab.js"></script>
    <script src="twitter-bootstrap/docs/assets/js/bootstrap-popover.js"></script>
    <script src="twitter-bootstrap/docs/assets/js/bootstrap-button.js"></script>
    <script src="twitter-bootstrap/docs/assets/js/bootstrap-collapse.js"></script>
    <script src="twitter-bootstrap/docs/assets/js/bootstrap-carousel.js"></script>
    <script src="twitter-bootstrap/docs/assets/js/bootstrap-typeahead.js"></script>
    <style>
      body {
        padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
      }
    </style>
    <link href="twitter-bootstrap/docs/assets/css/bootstrap-responsive.css" rel="stylesheet">
    <link href="style.css" rel="stylesheet">
	 
    <div class="container">

		<div class='span2 bgblack white'>Span2</div>
		<div class='span3 bgblack white'>Span3</div>
		<div class='span4 offset2 bgblack white'>span4 offset2</div>
		<br>
		<hr>
		
           <ul class="nav nav-pills">
            <li class="active"><a href="#">Regular link</a></li>
				
            <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
              <ul id="menu1" class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown 2 <b class="caret"></b></a>
              <ul id="menu2" class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown 3 <b class="caret"></b></a>
              <ul id="menu3" class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </li>
          </ul> 
			 
			 <!-- /tabs -->
			<hr>
			 <ul id="myTab" class="nav nav-tabs">
            <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
            <li><a href="#profile" data-toggle="tab">Profile</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#dropdown1" data-toggle="tab">@fat</a></li>
                <li><a href="#dropdown2" data-toggle="tab">@mdo</a></li>
              </ul>
            </li>
          </ul>
			 
        <!-- dropbutton -->
		  
		    <div class="btn-group pull-right">
            <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
              <i class="icon-user"></i> The Username
              <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
              <li><a href="#">Profile</a></li>
              <li class="divider"></li>
              <li><a href="#">Sign Out</a></li>
            </ul>
          </div>
			 
			 <!--  cont -->
			 
			     <div class="container-fluid">
      <div class="row-fluid">
        <div class="span3">
          <div class="well sidebar-nav">
            <ul class="nav nav-list">
              <li class="nav-header">Sidebar</li>
              <li class="active"><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li class="nav-header">Sidebar</li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li class="nav-header">Sidebar</li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
            </ul>
          </div><!--/.well -->
      
		<hr>
		
		Tooltip
		   <script src="twitter-bootstrap/docs/assets/js/bootstrap-tooltip.js"></script>
			<a id='tt' href="#"onmouseover='$(this).tooltip()'; title="first -tooltip">hover over me</a>

		
		<hr>
		
      <h1>Bootstrap starter template</h1>
      <p>Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>
		<br>
							 

    </div> <!-- /container -->

			
  </body>
</html>
